<script setup lang="ts">
/*
 * @description: 柱状图基础组件
 * @fileName: dp-chart-bar-base.vue
 * @params
 * @author: lxx
 * @date: 2025-04-16 14:48:00"
 * @version: V1.0.0
 */
import * as echarts from 'echarts'
import { type ChartPropsInt, BarChart, type chartDataInt, type chartItemType } from '@/hooks/useChart/charTypes'
import { ChartPropsDefault, getItemColor } from '@/hooks/useChart/charBase'
import { useChart } from '@/hooks/useChart/useChart'
const echartsRef = ref()
const emits = defineEmits(['chartClick'])
const props = withDefaults(defineProps<ChartPropsInt>(), ChartPropsDefault)

// const options = {
//   series: [
//     {
// type: BarChart,
// data: props?.customizeDataFun
//   ? props.customizeDataFun(props.chartData)
//   : props.chartData.map((item) => {
//       return (
//         Array.isArray(item) &&
//         item.map((sub: any, ind: number) => {
//           return {
//             ...sub,
//             itemStyle: {
//               color: getItemColor(props.color, ind)
//             }
//           }
//         })
//       )
//     })
//     }
//   ]
// }
const options: { series: any[] } = {
  series: []
}
const setOptions = (chartData: chartDataInt[], index?: number) => {
  return {
    type: BarChart,
    data: props?.customizeDataFun
      ? props.customizeDataFun(props.chartData)
      : chartData.map((item, index) => {
          return {
            ...item,
            itemStyle: {
              color: getItemColor(props.color, index)
            }
          }
        })
  }
}

const dataChangeFn = (chartData: chartDataInt[] | chartDataInt[][]) => {
  options.series = []
  // 多条数据
  if (Array.isArray(chartData[0])) {
    chartData.map((item, index) => {
      options.series.push(setOptions(item as chartDataInt[], index))
    })
  } else {
    options.series.push(setOptions(chartData as chartDataInt[]))
  }
  return options
}

dataChangeFn(props.chartData)

useChart(echartsRef, props, options, emits, dataChangeFn)
</script>
<template>
  <div ref="echartsRef" :style="{ width: props.width, height: props.height }"></div>
</template>
<style>
/* 样式调整 */
</style>
